<script setup lang="ts">
import { ref, reactive } from "vue";
import { HxqSelect } from "vue-mobile-hxq";
import { apiBaseCol, optionsData, eventsCol } from "assets/js/constant.js";
import selectDemo from "./components/selectDemo.vue";

const sel = ref("");

// API说明
const dataSource = reactive([
  {
    name: "required",
    param: "boolean",
    desc: "是否必填（此项只负责控制样式，需配合rules使用）",
    default: "fasle",
  },
  {
    name: "label",
    param: "string",
    desc: "标题文字",
    default: "-",
  },
  {
    name: "columns",
    param: "Array<{text:'选项1',value:1}>",
    desc: "对象数组，下拉框待选数据",
    default: "-",
  },
  {
    name: "name",
    param: "string",
    desc: "表单提交时的键，值为当前选项的text",
    default: "-",
  },
  {
    name: "value",
    param: "string",
    desc: "双向绑定值",
    default: "-",
  },
  {
    name: "vertical",
    param: "boolean",
    desc: "标题与值对齐方式，默认为左右布局",
    default: "false",
  },
  {
    name: "allowClear",
    param: "boolean",
    desc: "是否允许清除",
    default: "false",
  },
]);

// 事件说明
const eventsDataSource = reactive([
  {
    name: "onConfirm",
    desc: "选择后触发事件",
    callbackParam: "{ selectedOptions }",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">在一组备选项中进行单选选项。</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code
          class="language-css"
        >
          import { HxqSelect } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>

      <div class="public-flex-box">
        <div class="public-title-bold">基础用法</div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
&lt;script setup lang="ts">


const arrayData = [
	{ text: "杭州", value: "Hangzhou" },
	{ text: "宁波", value: "Ningbo" },
	{ text: "温州", value: "Wenzhou" },
	{ text: "绍兴", value: "Shaoxing" },
	{ text: "湖州", value: "Huzhou" },
];


const normalValue = ref("温州");

// 确定事件
const onConfirm = function (selectedOptions: Object) {
	console.log(selectedOptions);
};



    &lt;/script>
        </code></pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-select
			class="public_bottom_line"
			v-model="formData.sel"
			name="first"
			label="招牌材质1"
			allow-clear
			required
			:rules="[{required:true,message:'此项必填'}]"
			:columns="arrayData"
			@onConfirm="onConfirm"
        >&lt;/hxq-select>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">垂直布局</div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-selector
		v-model="formData.normalValue"
					label="招牌材质2"
					allow-clear
					vertical
					required
					:rules="[{required:true,message:'此项必填'}]"
					name="second"
					class="public_bottom_line"
					:columns="arrayData"
        > &lt;/hxq-selector>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">事件</div>
        <a-table
          :dataSource="eventsDataSource"
          :columns="eventsCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <selectDemo></selectDemo>
    </div>
  </div>
</template>
<style lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
.van-overlay {
  position: absolute;
}
.van-popup {
  position: absolute;
  width: 100%;
  right: 24px;
}
</style>
